<template>
  <div>
    <el-card class="box-card">
      <div class="flex">
        <div>
          <el-image :src="movies.imgUrl" />
          <h1>{{ movies.title }}</h1>
          <p>导演：{{ movies.director }}</p>
          <p>演员：{{ movies.actor }}</p>
        </div>
        <div>
          <el-radio-group v-model="radio1" @change="radioChange">
            <el-radio
              :label="item.id"
              size="large"
              border
              v-for="(item, index) in screeningTime"
              :key="index"
              >{{ item.room.name }} ￥{{ item.fare }}</el-radio
            >
          </el-radio-group>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" v-if="radio1">
      <template #header>
        <div class="card-header">
          <span>选座</span>
        </div>
      </template>
      <div class="seatList">
        <div
          class="seatitem"
          v-for="(item, index) in seatlist.seatinfo"
          :key="index"
          @click="selectSeat(item)"
        >
          <img
            class="seatimg"
            v-if="item.status === 0"
            src="../../assets/seat.png"
            alt=""
          />
          <img
            class="seatimg"
            v-if="item.status === 1"
            src="../../assets/seat1.png"
            alt=""
          />
          <img
            class="seatimg"
            v-if="item.status === 2"
            src="../../assets/seat2.png"
            alt=""
          />
          <div class="num" v-if="item.status !== 2">
            {{ item.id }}
          </div>
        </div>
      </div>
      <el-button
        style="margin: 0 auto; display: block"
        type="info"
        @click="submitSeat"
        >点击购买</el-button
      >
    </el-card>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span style="font-size: 20px; font-weight: 600">评论</span>
        </div>
      </template>
      <div>
        <div v-for="(item, index) in commentLists" :key="index">
          <div class="commentitem">
            <div class="commentitem-left">
              {{ item.content }}
            </div>
            <div class="commentitem-right">
              <span>{{ Time(item.createdAt) }}</span>
            </div>
          </div>
          <el-divider />
        </div>
      </div>
      <el-input
        v-model="comment"
        :rows="2"
        type="textarea"
        placeholder="发表评论"
      />
      <el-button
        type="primary"
        style="margin-top: 10px"
        round
        @click="SubComment"
        >提交</el-button
      >
    </el-card>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import {
  movieDetail,
  seatList,
  orderCreate,
  commentList,
  commentCreate,
} from "@/api/v2";
import { useRoute, useRouter } from "vue-router";
import { Try, Time } from "@/utils";
import { ElMessage, ElMessageBox } from "element-plus";
import useUser from "@/store/user";
const userStore = useUser();
const route = useRoute();
const router = useRouter();
const { id } = route.query;
const radio1 = ref();
const movies = ref({});
const screeningTime = ref([]);
const comment = ref("");
const commentLists = ref([]);
const seatlist = reactive({
  seatinfo: [],
  id: "",
  time_id: "",
});
const radioChange = async (e) => {
  const res = await seatList(e);
  const { seatinfo, id, time_id } = res.data;
  seatlist.seatinfo = seatinfo;
  seatlist.id = id;
  seatlist.time_id = time_id;
};
const selectSeat = (e) => {
  const { id, status } = e;
  const list = seatlist.seatinfo;
  if (status === 2) return ElMessage.info("该座位已被选");
  for (let i = 0; i < list.length; i++) {
    if (list[i].id === id) {
      list[i].status = status === 0 ? 1 : 0;
      break;
    }
  }
  seatlist.seatinfo = list;
};
const submitSeat = () => {
  const Selseat = [];
  const seatId = seatlist.id;
  const event_id = seatlist.time_id;
  const user_id = userStore.info.id;
  if (!user_id)
    return ElMessageBox.confirm("您还未登录是否前往登录", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      router.push("/login");
    });
  seatlist.seatinfo.forEach((e) => {
    if (e.status === 1) {
      Selseat.push(e.id);
    }
  });
  if (Selseat.length === 0) return ElMessage.info("请选择座位");
  Try(async () => {
    const res = await orderCreate({ Selseat, seatId, event_id, user_id });
    if (res.code === 200) {
      ElMessage.success(res.message);
      router.push("/my");
    } else {
      ElMessage.error(res.message);
    }
  });
};
const SubComment = () => {
  Try(async () => {
    const res = await commentCreate({
      content: comment.value,
      movie_id: id,
    });
    if (res.code === 200) {
      ElMessage.success(res.message);
      comment.value = "";
      commentlist();
    } else {
      ElMessage.error(res.message);
    }
  });
};
const getid = () => {
  Try(async () => {
    const res = await movieDetail(id);
    if (res.code == 200) {
      const { movie, screeningTimes } = res.data;
      movies.value = movie;
      screeningTime.value = screeningTimes;
    }
  });
};
const commentlist = () => {
  Try(async () => {
    const res = await commentList(id);
    if (res.code == 200) {
      const comment = res.data;
      console.log(comment);
      commentLists.value = comment;
    }
  });
};
onMounted(async () => {
  getid();
  commentlist();
});
</script>
<style scoped>
.box-card {
  width: 960px;
  margin: 10px auto;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.seatList {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.seatitem {
  width: 50px;
  height: 50px;
  margin: 20px;
  position: relative;
}
.seatimg {
  width: 50px;
  height: 50px;
}
.num {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}
.commentitem {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.commentitem-left,
.commentitem-right {
  flex: 1;
}
.commentitem-right {
  text-align: right;
}
</style>
